<%--
  Created by IntelliJ IDEA.
  User: sicilin
  Date: 2017/9/8
  Time: 9:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="commons-bootstrap.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <title>主页</title>
    <style type="text/css">
        .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus{
            border-bottom-color:#fff;
        }
        .nav-tabs > li > a{
            /*background:-webkit-gradient(linear, 0 0, 0 bottom, from(#99ccff), to(#fff));*/
            background-color:#efefdf;
        }
        .nav-tabs > li > a{
            border:0px;
        }
        .navbar{
            margin-bottom:10px;
        }
        /* -- 分割线 -- */

        body{
            background-color:#dbd4d4;
        }

        #bar-collapse a{
            font-size:15px;
            font-weight: bold;
        }
        #menu a{
            color:#dbd4d4;
        }
        #menu li > a:hover{
            color:#fff;
        }
        #menu li > ul a:hover{
            color:#101010;
        }
        #menu li ul{
            background-color:#101010;
        }

        .iframePanel{
            height:calc(100% - 120px);
        }
    </style>
    <script type="text/javascript" src="<%=basePath%>common/script/customize/customize.js"></script>
    <script type="text/javascript">
        var menuObj = null;

        $(document).ready(function(){
            menuObj = $('#menu');
            loadMenu([
                {
                    menuCode:'objectManager'
                    ,menuName:'对象管理'
                    ,url:basePath+'pages/object/object-manager.jhtml'
                }
                ,{
                    menuCode:'systemManager'
                    ,menuName:'系统管理'
                    ,url:null
                    ,children:[
                        {menuCode:'userManager',menuName:'用户管理',url:basePath+'pages/system/user-manager.jhtml'}
                        ,{menuCode:'roleManager',menuName:'角色管理',url:basePath+'pages/system/role-manager.jhtml'}
                    ]
                }
            ]);

            $('#loginUserName').text(" "+currentUser.name);
        });

        function createMenu(code,name,url){
            var menu = {
                menuCode:code
                ,menuName:name
                ,url:url
                ,children:[]
            };
            return menu;
        }

        function loadMenu(menus){

            menus.forEach(function(menu,index,array){
                var li = null;
                if(CommonUtils.isBlank(menu.children)){
                    li = $('<li><a href="javascript:void(0);" onclick="openTab(this)" data-tabs="#tabs" data-tab-code="'+menu.menuCode+'" data-tab-name="'+menu.menuName+'" data-tab-location="'+menu.url+'">'+menu.menuName+'</a></li>');
                }else{
                    li = $('<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">'+menu.menuName+' <span class="caret"></span></a></li>')
                    var ul = $('<ul class="dropdown-menu"></ul>');
                    menu.children.forEach(function(item,index,array){
                        var sonli = $('<li><a href="javascript:void(0);" onclick="openTab(this)" data-tabs="#tabs" data-tab-code="'+item.menuCode+'" data-tab-name="'+item.menuName+'" data-tab-location="'+item.url+'">'+item.menuName+'</a></li>');
                        ul.append(sonli);
                    });
                    li.append(ul);
                }
                menuObj.append(li);

            });

        }

        /*--------分割线--------*/

        function openTab(obj){
            var jq = $(obj);
            var tabs = $(jq.data("tabs"));
            var tabContent = $(tabs.data('tabContent'));
            var tabCode = jq.data('tabCode');
            var tabName = jq.data('tabName');
            var url = jq.data('tabLocation');
            var tab = tabs.find('li[data-tab-code="'+tabCode+'"]');
            var content = $('#tab_'+tabCode);
            if(tab.length == 0){
                tab = addTab(tabs,tabCode,tabName);
                content = addTabContent(tabContent,tabCode,url);
            }else{
                refreshContent(content);
            }
            tab.find("a").trigger('click');
        }

        function addTab(tabsJq,tabCode,tabName){
            var tabContentId = "tab_"+tabCode;
            var tab = $('<li role="presentation" data-tab-code='+tabCode+' ><a data-toggle="tab" data-target="#'+tabContentId+'" href="javascript:void(0);">'+tabName+'<span onclick="closeTab(this)" onmouseover="changeCloseClass(this)" onmouseleave="changeCloseClass(this)" class="iconfont icon-close"></span></a></li>');
            tabsJq.append(tab);
            return tab;
        }

        function addTabContent(tabContentJq,tabCode,url){
            var tabContentId = "tab_"+tabCode;
            var content = $('<div class="tab-pane iframePanel" id="'+tabContentId+'"><iframe style="width: 100%;height: 100%;" name="iframe_'+tabContentId+'" src="'+url+'" frameborder="0" /></div>');
            tabContentJq.append(content);
        }

        function closeTab(obj){
            var link = $(obj).parent();
            if(link.data('toggle') == 'tab'){
                var target = $(link.data('target'));
                target.remove();
            }
            var nextLink = link.parent().next().find('a[data-toggle="tab"]');
            nextLink.click();
            link.parent().remove();
        }

        function changeCloseClass(obj){
            if($(obj).hasClass("icon-close")){
                $(obj).removeClass("icon-close");
                $(obj).addClass("icon-closecircled");
                $(obj).css('color','red');
            }else{
                $(obj).addClass("icon-close");
                $(obj).removeClass("icon-closecircled");
                $(obj).css('color','#555');
            }
        }

        function refreshContent(contentJq){
            var iframeContentName = "iframe_"+contentJq.attr("id");
            var iframeJq = contentJq.find('iframe[name="'+iframeContentName+'"]');
            iframeJq.attr("src",iframeJq.attr("src"));
        }
    </script>
</head>
<body class="container-fluid" style="padding:10px;">
    <!-- 导航栏 -->
    <div class="navbar navbar-inverse">
        <!-- 导航栏头部 -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bar-collapse" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand">TMS</a>
            <div class="navbar-brand"><span id="loginUserName" class="iconfont icon-usered"></span></div>
            <a style="margin:0px 30px 0px 0px;float:right;" class="navbar-brand iconfont icon-role" href="<%=basePath%>logout.json">登出</a>
        </div>
        <div class="collapse navbar-collapse" id="bar-collapse">
            <ul id="menu" class="nav navbar-nav">
            </ul>
        </div>
    </div>
    <ul id="tabs" data-tab-content="#tabContents" class="nav nav-tabs">
    </ul>
    <div id="tabContents" class="tab-content">
    </div>
</body>
</html>
